<template>
  <h1>这个是HelloWorld组件</h1>
  <p>价格:{{ price }}</p>
  <button @click="changeValue">修改价格</button>
</template>

<script>
import { ref } from "vue";
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
} from "@vue/runtime-core";
export default {
  name: "HelloWorld",
  setup() {
    console.log("setup函数执行了");

    let price = ref(20);

    function changeValue() {
      this.price += 2;
    }

    onBeforeMount(() => {
      console.log("onBeforeMount函数执行了");
    }),
      onMounted(() => {
        console.log("onMounted函数执行了");
      }),
      onBeforeUpdate(() => {
        console.log("onBeforeUpdate函数执行了");
      });
    onUpdated(() => {
      console.log("onUpdated函数执行了");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount函数执行了");
    });
    onUnmounted(() => {
      console.log("onUnmounted函数执行了");
    });

    return {
      price,
      changeValue,
    };
  },
  beforeCreate() {
    console.log("beforeCreate函数执行了");
  },
  create() {
    console.log("create函数执行了");
  },
  beforeMount() {
    console.log("beforeMount函数执行了");
  },
  mounted() {
    console.log("mounted函数执行了");
  },
  beforeUpdate() {
    console.log("beforeUpdate函数执行了");
  },
  updated() {
    console.log("updated函数执行了");
  },
  beforeUnmount() {
    console.log("beforeUnmount函数执行了");
  },
  unmounted() {
    console.log("unmounted函数执行了");
  },
};
</script>

<style>
</style>